<script setup>
import axios from "axios";
import {ref,onMounted} from "vue"
import { useRoute } from "vue-router"

import animeFanDetail1 from "../../../components/animeFanDetail1.vue"
import animeFanDetail2 from "../../../components/animeFanDetail2.vue";

import jbtx1 from "../../../../public/images/anime/jbtx/jbtx1.webp"
import jbtx2 from "../../../../public/images/anime/jbtx/jbtx2.webp"
import jbtx3 from "../../../../public/images/anime/jbtx/jbtx3.webp"
import jbtx4 from "../../../../public/images/anime/jbtx/jbtx4.webp"
import jbtx5 from "../../../../public/images/anime/jbtx/jbtx5.webp"
import jbtx6 from "../../../../public/images/anime/jbtx/jbtx6.webp"
import jbtx7 from "../../../../public/images/anime/jbtx/jbtx7.webp"
import jbtx8 from "../../../../public/images/anime/jbtx/jbtx8.webp"
import jbtx9 from "../../../../public/images/anime/jbtx/jbtx9.webp"
import jbtx10 from "../../../../public/images/anime/jbtx/jbtx10.webp"
import jbtx11 from "../../../../public/images/anime/jbtx/jbtx11.webp"
import jbtx12 from "../../../../public/images/anime/jbtx/jbtx12.webp"

onMounted(()=>{
    document.title = "久保同学不放过我 - 番剧|EvenSO"
})

const zpxq = ref(null)
const xgsp = ref(null)
const jiBtn1_6 = ref(null)
const jiBtn7_12 = ref(null)

const funcBtn = ref(0)
const jiBtn = ref(0)

const jbtxFanImageUrl = ref()
const jbtxFanName = ref()

const jbtxJiImage1 = ref(jbtx1)
const jbtxJiImage2 = ref(jbtx2)
const jbtxJiImage3 = ref(jbtx3)
const jbtxJiImage4 = ref(jbtx4)
const jbtxJiImage5 = ref(jbtx5)
const jbtxJiImage6 = ref(jbtx6)
const jbtxJiImage7 = ref(jbtx7)
const jbtxJiImage8 = ref(jbtx8)
const jbtxJiImage9 = ref(jbtx9)
const jbtxJiImage10 = ref(jbtx10)
const jbtxJiImage11 = ref(jbtx11)
const jbtxJiImage12 = ref(jbtx12)

const fan1_name = ref("女主角女生与路人男生")
const fan2_name = ref("运气不佳与家中拜访")
const fan3_name = ref("普通人的礼物")
const fan4_name = ref("红色的心与礼物的主人")
const fan5_name = ref("白色情人节与心意的收件人")
const fan6_name = ref("医务室与主人公")
const fan7_name = ref("留宿与新学年")
const fan8_name = ref("赏花与擦肩而过")
const fan9_name = ref("新学期与分班")
const fan10_name = ref("比身高与壁咚")
const fan11_name = ref("电影院与面部表情")
const fan12_name = ref("主人公与祝福")

axios.get('/go1-api/anime/jbtxbfgw').then(async res=>{
    console.log(res.data)
    jbtxFanImageUrl.value = await res.data[0].anime_image
    jbtxFanName.value = await res.data[0].name
}).catch(err=>console.log(err))

const changeBtn = (num) => {
    switch(num){
        case 0:
        zpxq.value.style.color = "skyblue"
        xgsp.value.style.color = "black"
        funcBtn.value = 0
            break
        case 1:
            zpxq.value.style.color = "black"
            xgsp.value.style.color = "skyblue"
            funcBtn.value = 1
            break
        default:
            break
    }
}
const jiBtnChange = (num) => {
    switch(num){
        case 1:
            jiBtn1_6.value.style.color = "#00a1d6"
            jiBtn7_12.value.style.color = "black"
            jiBtn.value = 0
            break
        case 2:
            jiBtn1_6.value.style.color = "black"
            jiBtn7_12.value.style.color = "#00a1d6"
            jiBtn.value = 1
            break
        default:
            break
    }
}
</script>

<template>
    <div class="jbtxVideoAll">
        <div class="dialogBoxColor"></div>
        <div class="jbtxDetailTitleBox">
            <animeFanDetail1 
                :fan_image="jbtxFanImageUrl"
                :fan_name="jbtxFanName"
                fan_type="漫画改"
                fan_theme1="音乐"
                fan_theme2="日常"
                fan_year="2022年10月8号开播"
                fan_status="已完结,全12话"/>
        </div>
        <div class="funcBox1">
            <span ref="zpxq" @click="changeBtn(0)">{{ "作品详情" }}</span>
            <span ref="xgsp" @click="changeBtn(1)">{{ "相关视频" }}</span>
        </div>
        <div class="detail1Box" v-if="funcBtn == 0">
            <div class="zpxq_master_box">
                <span class="zpxq_zp">正片</span>
                <div class="jiBtn1_6" ref="jiBtn1_6" @click="jiBtnChange(1)">第1话 - 第6话</div>
                <div class="jiBtn7_12" ref="jiBtn7_12" @click="jiBtnChange(2)">第7话 - 第12话</div>
                <div class="fan1" v-if="jiBtn == 0">
                    <animeFanDetail2 
                        :image1="jbtxJiImage1"
                        :image2="jbtxJiImage2"
                        :image3="jbtxJiImage3"
                        :image4="jbtxJiImage4"
                        :image5="jbtxJiImage5"
                        :image6="jbtxJiImage6"
                        ji_name1="第1话" ji_name2="第2话" ji_name3="第3话"
                        ji_name4="第4话" ji_name5="第5话" ji_name6="第6话" 
                        :fan_name1="fan1_name" :fan_name2="fan2_name" :fan_name3="fan3_name"
                        :fan_name4="fan4_name" :fan_name5="fan5_name" :fan_name6="fan6_name"
                        fan1_to="jbtxbfgw/1" fan2_to="jbtxbfgw/2" fan3_to="jbtxbfgw/3" fan4_to="jbtxbfgw/4"
                        fan5_to="jbtxbfgw/5" fan6_to="jbtxbfgw/6"
                    />
                </div>
                <div class="fan1" v-else-if="jiBtn == 1">
                    <animeFanDetail2 
                        :image1="jbtxJiImage7"
                        :image2="jbtxJiImage8"
                        :image3="jbtxJiImage9"
                        :image4="jbtxJiImage10"
                        :image5="jbtxJiImage11"
                        :image6="jbtxJiImage12"
                        ji_name1="第7话" ji_name2="第8话" ji_name3="第9话" 
                        ji_name4="第10话" ji_name5="第11话" ji_name6="第12话"
                        :fan_name1="fan7_name" :fan_name2="fan8_name" :fan_name3="fan9_name"
                        :fan_name4="fan10_name" :fan_name5="fan11_name" :fan_name6="fan12_name"
                        fan1_to="jbtxbfgw/7" fan2_to="jbtxbfgw/8" fan3_to="jbtxbfgw/9" fan4_to="jbtxbfgw/10"
                        fan5_to="jbtxbfgw/11" fan6_to="jbtxbfgw/12"
                    />
                </div>
                <span class="zpxq_pv">PV</span>
            </div>
        </div>
    </div>
</template>

<style scoped>
.jbtxVideoAll{
    position: absolute;
    left: 0;
    top: 0;
    width: 1855px;
    height: 100%;
}
.dialogBoxColor{
    width: 100%;
    height: 6%;
    background: linear-gradient(to left,rgb(56,48,47),rgb(105,68,128));
}
.jbtxDetailTitleBox{
    width: 100%;
    height: 45%;
}
.funcBox1{
    width: 100%;
    height: 8%;
    display: flex;
    align-items: center;
    background-color: #fff;
}
.funcBox1 span{
    margin-left: 20px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
}
.funcBox1 span:hover{
    color: skyblue;
}
.detail1Box{
    width: 100%;
    height: 80%;
    background-color: rgb(244,245,247);
}

.zpxq_master_box{
    position: absolute;
    left: 12%;
    top: 62%;
    width: 60%;
    height: 70%;
    background-color: #fff;
    border-radius: 5px;
}
.zpxq_zp{
    position: absolute;
    left: 20px;
    top: 15px;
    font-size: 20px;
    font-weight: 600;
}
.jiBtn1_6{
    position: absolute;
    left: 100px;
    top: 17px;
    font-size: 15px;
    color: #00a1d6;
    border-bottom-color: #00a1d6;
    cursor: pointer;

}
.jiBtn1_6:hover{
    color: #00a1d6;
    border-bottom-color: #00a1d6;
}
.jiBtn7_12{
    position: absolute;
    left: 220px;
    top: 17px;
    font-size: 15px;
    cursor: pointer;
}
.jiBtn7_12:hover{
    color: #00a1d6;
    border-bottom-color: #00a1d6;
}
.fan1{
    position: absolute;
    left: 0;
    top: 10%;
    width: 100%;
    height: 35%;
}

.zpxq_pv{
    position: absolute;
    left: 2%;
    top: 48%;
    width: 10%;
    height: 10%;
    font-size: 20px;
    font-weight: 600; 
}
</style>